<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { showFailToast, showSuccessToast } from "vant";
import useCountdown from "@/hooks/useCountdown.ts";
import useSendCode from "@/hooks/useSendCode.ts";
import useUserStore from "@/pinia/modules/userStore.ts";
import { CodeLogin } from "@/types/loginTypes";
import { useRouter } from "vue-router";

const userStore = useUserStore();

const router = useRouter();

const openIdInfo = ref<string>("");

const qqLoginSuccess = ref<boolean>(true);

/*表单事件对象*/
const formData = reactive<CodeLogin & { openId?: string }>({
    mobile: "",
    code: "",
});

const { code, sendCode } = useSendCode();

const { start, countdown, subCountdown } = useCountdown(60);


/*qq登录的回调函数*/
const qqLogin = async (openId: string) => {
    try {
        await userStore.qqLogin(openId);
        qqLoginSuccess.value = true;
        showSuccessToast("QQ登录成功");
        router.push("/")
    } catch (error: any) {
        showFailToast("QQ登录失败");
        qqLoginSuccess.value = false;
    }
};

/*点击发送验证码按钮的回调函数*/
const handleSendCode = async () => {
    try {
        subCountdown();
        await sendCode({ mobile: formData.mobile, type: "bindMobile" });
        formData.code = code.value;
    } catch (error: any) {
        showFailToast(error.message);
    }

};

/*表单提交事件*/
const handleSubmit = async () => {
    formData.openId = openIdInfo.value;
    try {
        const bindRessult = await userStore.bindMobil(formData);
        showSuccessToast(bindRessult);
        router.push("/");
    } catch (error: any) {
        showFailToast(error.message);
    }
};

onMounted(() => {
    if (QC.Login.check()) {
        QC.Login.getMe((openId: string) => {
            openIdInfo.value = openId;
            // 组件挂载完毕默认当作用户qq是绑定过手机号的
            // 如果没有绑定手机号则qq登录请求失败，让用户进行绑定手机
            qqLogin(openId);
        });
    }
});


</script>

<template>
    <div class="login" v-if="!qqLoginSuccess">
        <nav-bar title="绑定手机"></nav-bar>
        <div class="head">
            <h3>手机绑定</h3>
        </div>
        <van-form label-width="15px" show-error :show-error-message="false" @submit="handleSubmit">
            <van-field name="mobile" placeholder="请输入手机号" v-model="formData.mobile">
                <template #label>
                    <svg-icon svg-name="mobile" width="20px" height="20px"></svg-icon>
                </template>
            </van-field>
            <van-field name="code" placeholder="请输入验证码" v-model="formData.code">
                <template #label>
                    <svg-icon svg-name="password" width="20px" height="20px"></svg-icon>
                </template>
                <template #button>
                    <van-button round size="mini" type="primary" :disabled="start" @click="handleSendCode">{{ start ? `${countdown}S后重新发送` : `发送验证码` }}</van-button>
                </template>
            </van-field>
            <div class="cp-cell">
                <van-button style="margin-top: 50px" block round type="primary" native-type="submit">立即绑定</van-button>
            </div>
        </van-form>
    </div>
</template>

<style scoped lang="scss">
@import "@/styles/login";
</style>
